<!--
 * @Author: hpc(hepch)
 * @Date: 2021-06-15 13:41:36
 * @LastEditors: 何鹏程(hepch)
 * @LastEditTime: 2021-06-15 14:24:23
 * @Description: content
 * @Copyright: 超图软件华中平台客户中心 (SuperMap Software Co., Ltd. -Central China Platform)
-->
<template>
  <div id="Mark"></div>
</template>

<script>
import L from "leaflet";
export default {
  data() {
    return {
      markerid: 0,
      title: "",
    };
  },
  computed: {
    markelabelGroup() {
      return this.$store.state.markelabelGroup;
    },
    map() {
      return this.$store.state.map;
    },
  },
  mounted() {
    var self = this;
    window.marktitletool = (e) => {
      if (e) {
        let evt = window.event || e;
        if (evt.keyCode === 13) {
          self.title = document.getElementById("markertitle-divid").value;
          self.marker.unbindTooltip();
          if (self.title != "")
            self.marker
              .bindTooltip(`${this.title}`, {
                permanent: true,
                offset: L.point(0, 20),
                direction: "right",
              })
              .openTooltip();
          self.title = "";
        }
      } else {
        self.title = document.getElementById("markertitle-divid").value;
        self.marker.unbindTooltip();
        if (self.title != "")
          self.marker
            .bindTooltip(`${this.title}`, {
              permanent: true,
              offset: L.point(0, 20),
              direction: "right",
            })
            .openTooltip();
        self.title = "";
      }
    };
  },
  methods: {
    addmarkerToMap(latlng) {
      let self = this;
      let icon = L.icon({
        iconSize: [35, 40],
        iconAnchor: [19, 13],
        iconUrl: `./img/icons/tuding.png`,
      });
      this.marker = L.marker(latlng, { icon: icon, draggable: true })
        .bindPopup((marker) => {
          self.marker = marker;
          return `备注: <input type="text" id="markertitle-divid" onkeydown="window.marktitletool(event)" >  <button style="background-color: #1a90fd;
    color: #fffafa;" onclick="window.marktitletool()">保存</button>`;
        })
        .addTo(this.markelabelGroup);
      L.popup()
        .setLatLng(latlng)
        .setContent(
          `备注: <input type="text" id="markertitle-divid" onkeydown="window.marktitletool(event)" >  <button style="background-color: #1a90fd;
    color: #fffafa;" onclick="window.marktitletool()">保存</button>`
        )
        .openOn(this.map);
    },
    clearMarker() {
      this.markelabelGroup.clearLayers();
    },
  },
};
</script>

<style></style>
